<template>
  <el-dialog :visible.sync="dialogFormVisible" width="500px" @close="close">
    <template slot="title">
      <div>
        <svg-icon icon-class="my-user-add" />
        <span>{{ title }}</span>
      </div>
    </template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item
        v-for="(value, key, index) in user"
        :key="index"
        :label="value"
        :prop="key"
      >
        <el-switch
          v-if="key == 'status'"
          v-model="form[key]"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
        <el-select
          v-else-if="key == 'roleId'"
          v-model="form[key]"
          clearable
          placeholder="赋予权限"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-input v-else v-model.trim="form[key]" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { postAction, getAction } from '@/api/action'
  const user = {
    userName: '账号',
    pwd: '密码',
    nickName: '昵称',
    phone: '手机号码',
    status: '状态',
    roleId: '角色',
  }
  export default {
    name: 'UserManagementEdit',
    data() {
      return {
        user: user,
        form: {
          userName: undefined,
          pwd: undefined,
          nickName: undefined,
          phone: undefined,
          status: undefined,
          roleId: undefined,
        },
        rules: {
          userName: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { pattern: /^(\w){6,16}$/, message: '请设置6-16位字母、数字组合' },
          ],
          nickName: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
          ],
        },
        title: '',
        dialogFormVisible: false,
        url: {
          roles: '/presoftasim/system/role/list', //获得所有的角色
          userRoles: '/presoftasim/system/userRole/list', //获得当前选中的用户的角色
        },
        options: [
          {
            roleCode: '-1',
            roleName: '未请求到角色',
          },
        ],
      }
    },
    created() {
      this.getRoles()
    },
    methods: {
      showEdit(row) {
        //这里却是数字
        if (!row) {
          this.title = '添加'
          this.form = {}
        } else {
          this.title = '编辑'
          let obj = Object.assign({}, row)
          this.getUserRoles(obj)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
        this.$refs['form'].clearValidate()
      },
      save() {
        //必须是String
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let obj = Object.assign({}, this.form)
            if (obj.status == undefined) {
              obj.status = 0
            }
            obj.status = obj.status.toString()
            this.close()
            this.$emit('fetch-data', obj)
          } else {
            return false
          }
        })
      },
      getRoles() {
        postAction(this.url.roles, {})
          .then((res) => {
            if (res.code == 200) {
              this.options = res.data
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
      getUserRoles(obj) {
        getAction(this.url.userRoles, { userIds: obj.id })
          .then((res) => {
            if (res.code == 200) {
              let arr = []
              res.data.map((item) => {
                arr.push(item.roleId)
              })
              obj.roleId = arr[0]
              this.form = Object.assign({}, obj)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
    },
  }
</script>
